
<div>
    <div style="margin-bottom: 18px;
        border-bottom: 1px solid gainsboro;
        height: 32px;">
        <span>角色 [ {{roleCode}}：{{roleName}}] 的功能权限</span>
    </div>
    <div class="ui-g">
        <p-card  class="ui-g-4" [style]="{width: '100%',border:'0px'}">
            <div>
                <nz-input  id="searchaVals"  [nzType]="'search'"    [nzPlaceHolder]="'请输入过滤信息'"  style="margin-bottom: 10px; width: 60%;" ></nz-input>
                <span style="width: 7%; cursor: pointer; margin-right: 2%"  (click)="clickFunc('reset')" class="anticon anticon-sync"></span>
                <span style=" width: 6%; cursor: pointer; margin-right: 2%" class="anticon anticon-down-square-o"  (click)="clickFunc('expand')"></span>
                <span style=" width: 6%; cursor: pointer; margin-right: 2%" class="anticon anticon-up-square-o" (click)="clickFunc('shrink')"></span>
            </div>
            <app-tree
                [initDate] = "treedata"
                [noMenu] = "noMenu"
                [inputSearch] = "inputSearch"
                (develop)="Unfold($event)"
                [selectionType]='selectionType'
                (Select)="TreeSelect($event)"
                >
            </app-tree>
        </p-card>
        <p-card class="ui-g-8"  *ngIf="tabShow" [style]="{border: '0px'}" >
            <div class="ui-g-12">
                <h3 style='width:100%;margin:1rem 0;font-weight:bold' >功能：{{funcInfo.funcName}}</h3>
                <p>{{funcInfo.funcDesc}}</p>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-12">
                    <div class="ui-g-12" style=" border-bottom: 1px solid #ccc">
                        <h2><span class="anticon anticon-unlock"></span> &nbsp;&nbsp; 不验证权限的行为</h2>
                    </div>
                    <div class="ui-g-12" style="margin-left: 5%">
                        <div class="ui-g-12" *ngIf="nocheckOptionsOne.length>0">
                            <nz-checkbox-group [(ngModel)]="nocheckOptionsOne"
                                               [nzDisabled]="true">
                            </nz-checkbox-group>
                        </div>
                        <div class="ui-g-12" *ngIf="nocheckOptionsOne.length === 0">
                            <h3 style="text-align: center">暂无不验证权限的行为</h3>
                        </div>
                    </div>
                     <!--<div class="ui-g-6"> {{roleTxt}}</div>-->
                </div>
                <div class="ui-g-12">
                    <div class="ui-g-12" style="position: relative; border-bottom: 1px solid #ccc">
                        <h2 style="display: inline-block"><span class="anticon anticon-lock"></span> &nbsp;&nbsp; 验证权限的行为</h2>
                        <button style="top:-4px" *ngIf="isSaveEdit" nz-button type="reset" (click)="edit()" [nzSize]="'large'" class="mx-sm">修改</button>
                        <button style="margin-left: 8px; top:-4px;margin-right: 8px;" *ngIf="!isSaveEdit" nz-button type="submit" (click)="save()"  [nzType]="'primary'"  [nzSize]="'large'">保存</button>
                        <button style="margin-left: 8px; top:-4px; margin-right: 8px;" *ngIf="!isSaveEdit" nz-button type="submit" (click)="cancel()"  [nzType]="'large'"  [nzSize]="'large'">取消</button>
                    </div>
                    <div class="ui-g-12" style="margin-left: 5%">
                        <label style="width:100%; margin-left: 8px; margin-top:1rem;" nz-checkbox [(ngModel)]="checked" [nzDisabled]="isDisabledButton" (ngModelChange)="allSelect($event)">
                            <span (click)="reset(checkOptionsOne)"> 操作行为</span>
                        </label>
                        <nz-checkbox-group class="checkboxId"
                                           [(ngModel)]="checkOptionsOne"
                                           (ngModelChange)="changes(checkOptionsOne)"
                                           [nzDisabled]="isDisabledButton"
                                           (click)="reset(checkOptionsOne)">
                        </nz-checkbox-group>
                    </div>
                    <div style="margin-top:15px;">
                        <h2  style="border-bottom: 1px solid #ccc"><span class="anticon anticon-edit"></span> &nbsp;&nbsp; 角色拥有的行为权限:</h2>
                        <li class="ui-g-4" *ngFor="let option of roleTxt;let n=index" >
                            {{roleTxt[n]}}
                        </li>
                    </div>
                    <!--<div class="ui-g-6"> {{roleTxt}}</div>-->
                </div>
            </div>
        </p-card>
    </div>

</div>

<div *ngIf="!isrootChild">
    <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
        <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
            <h3 style="font-weight:bold;margin-bottom: 15px;">请选择一个角色</h3>
        </div>
    </div>
</div>


<style>
    .checkboxId {
        margin-left: 8px;
    }
</style>
